<template>
  <div style="padding-right: 10px; height: calc(100vh - 60px); overflow: auto">
    <component v-if="designer.widget.layout" :is="LayoutPanels[designer.widget.layout]" :designer="designer"></component>
  </div>
</template>

<script setup lang="ts" name="PropertyPanel">
import { defineAsyncComponent } from "vue";
import type { Component } from "vue";
defineProps({
  designer: {
    type: Object
  }
});
const LayoutPanels: Record<String, Component> = {
  tableLayout: defineAsyncComponent(() => import("./TableLayoutPanel/index.vue")),
  dialogLayout: defineAsyncComponent(() => import("./DialogLayoutPanel/index.vue")),
  flowFormLayout: defineAsyncComponent(() => import("./FlowFormLayoutPanel/index.vue")),
  reportFormLayout: defineAsyncComponent(() => import("./FlowFormLayoutPanel/index.vue"))
};
</script>

<style scoped></style>
